<template>
	<view class="container">
		<date-select-view @change="dateChange" :defaultTime="daily"></date-select-view>
		<children-base-top-view
			:name="children.name"
			:gender="children.gender"
			:month="children.month"
			:imgUrl="children.imgUrl"
			:birthday="children.birthday"
			/>
		<view class="sub">
			<view v-for="(sub, subIndex) in subList" @click="subClick(subIndex)" class="sub-item"
				:class="subPostion === subIndex ? 'sub-item-check' : ''" :key="subIndex"
				:style="{'margin-left': subIndex === 1 || subIndex === 2 || subIndex === 3 ? '10rpx':'0rpx'}">
				<image class="cover" :src="subPostion === subIndex ? sub.hover : sub.default"></image>
				<text class="title">{{sub.title}}</text>
			</view>
		</view>
		<view v-show="subPostion === 0" class="sub1">
			<view class="content">
				<view class="left">
					<view class="content-item">
						<view class="top">
							<image class="cover" src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/zd/daily-sub2-hover.png"></image>
							<view class="title">健康</view>
						</view>
						<u-rate :count="count" v-model="dailyReport.healthRank" :size="38" active-color="#ffffff" inactive-color="#ffffff"></u-rate>
					</view>
				</view>
				<view class="right">
					<view class="item1">
						<view class="content-item">
							<view class="top">
								<image class="cover" src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/zd/daily-sub3-hover.png"></image>
								<view class="title">饮食</view>
							</view>
							<u-rate :count="count" v-model="dailyReport.feedRank" :size="38" active-color="#ffffff" inactive-color="#ffffff"></u-rate>
						</view>
					</view>
					<view class="item2">
						<view class="content-item">
							<view class="top">
								<image class="cover" src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/zd/daily-sub4-hover.png"></image>
								<view class="title">学习</view>
							</view>
							<u-rate :count="count" v-model="dailyReport.studyRank" :size="38" active-color="#ffffff" inactive-color="#ffffff"></u-rate>
						</view>
					</view>
				</view>
			</view>
			<view class="title">{{dailyReport.summary}}</view>
		</view>
		<view v-show="subPostion === 1 || subShow">
			<u-collapse  v-if="loaded" ref="uCollapse"
				:accordion="false"
				:head-style="headStyle"
				class="collapse">
				<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index"
					:open="true"
					@change="itemChange" :index="index">
					<view class="collapse-item">
						<view  v-for="(record, recordIndex) in item.list"
							:options="options"
							:key="record.id" 
							class="item">
							<temperature  :state="true" v-if="item.type===0" :record="record" @itemClick="itemClick(record, item.type)"></temperature>
							<food  :state="true" v-else-if="item.type === 1" :record="record" @itemClick="itemClick(record, item.type)"></food>
							<defecation  :state="true" v-else-if="item.type === 2" :record="record" @itemClick="itemClick(record, item.type)"></defecation>
							<sleep  :state="true" v-else-if="item.type === 3" :record="record" @itemClick="itemClick(record, item.type)"></sleep>
							<handover v-else-if="item.type === 4" :record="record"></handover>
							<medication v-else-if="item.type === 5" :record="record"></medication>
							<schedule  :state="true" v-else-if="item.type === 6" :record="record" @itemClick="itemClick(record, item.type)"></schedule>
							<view v-else></view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
			<u-empty v-if="loaded && !itemShow" class="noContent" text="暂时没有宝宝的一日记录"></u-empty>
		</view>
		<view v-show="subPostion === 2 || subShow">
			<u-collapse  v-if="loaded" ref="uCollapse"
				:accordion="false"
				:head-style="headStyle"
				class="collapse">
				<u-collapse-item :title="item.head" v-for="(item, index) in itemList1" :key="index"
					:open="true"
					@change="itemChange" :index="index">
					<view class="collapse-item">
						<view  v-for="(record, recordIndex) in item.list"
							:options="options"
							:key="record.id" 
							class="item">
							<temperature  :state="true" v-if="item.type===0" :record="record" @itemClick="itemClick(record, item.type)"></temperature>
							<food  :state="true" v-else-if="item.type === 1" :record="record" @itemClick="itemClick(record, item.type)"></food>
							<defecation  :state="true" v-else-if="item.type === 2" :record="record" @itemClick="itemClick(record, item.type)"></defecation>
							<sleep  :state="true" v-else-if="item.type === 3" :record="record" @itemClick="itemClick(record, item.type)"></sleep>
							<handover v-else-if="item.type === 4" :record="record"></handover>
							<medication v-else-if="item.type === 5" :record="record"></medication>
							<schedule  :state="true" v-else-if="item.type === 6" :record="record" @itemClick="itemClick(record, item.type)"></schedule>
							<view v-else></view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
			<u-empty v-if="loaded && !itemShow1" class="noContent" text="暂时没有宝宝的一日记录"></u-empty>
		</view>
		<view v-show="subPostion === 3 || subShow">
			<view v-for="(item, index) in scheduleRecordList">
				<studyBaby :record="item"></studyBaby>
			</view>
			
			<u-empty v-if="loaded && !itemShow" class="noContent" text="暂时没有宝宝的一日记录"></u-empty>
		</view>
		 <record-type-select ref="refRecordType"></record-type-select>
		
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	import {
		getTemperatureList,
		getFeedingList,
		getSleepList,
		getHandoverList,
		getPottyList,
		getMedicationList,
		
		getTemperatureListP,
		getFeedingListP,
		getSleepListP,
		getHandoverListP,
		getPottyListP,
		getMedicationListP,
		getDailyReport,
		getAppMoreList
	} from '@/api/record.js'
	import {
		getChildrenSchedule
	} from '@/api/course.js'
	import ChildrenBaseTopView from '@/components/children-base-top-view.vue'
	import DateSelectView from '@/components/date-select-view.vue'
	import RecordTypeSelect from "@/pages_sub/record/components/record-type-select.vue"
	import Temperature from './components/temperature.vue'
	import Food from './components/food.vue'
	import Defecation from './components/defecation.vue'
	import Sleep from './components/sleep.vue'
	import Handover from './components/handover.vue'
	import Medication from './components/medication.vue'
	import Schedule from './components/schedule.vue'
	import StudyBaby from './components/studyBaby.vue'
	
	import appMixin from '@/mixins/app.js'
	const Templey = [{
					head: "体温状况",
					open: false,
					list: [],
					tchGet: getTemperatureList,
					pGet: getTemperatureListP,
					type: 0,
				}, {
					head: "如厕",
					open: false,
					list: [],
					tchGet: getPottyList,
					pGet: getPottyListP,
					type: 2,
				}, {
					head: "睡眠情形",
					open: false,
					list: [],
					tchGet: getSleepList,
					pGet: getSleepListP,
					type: 3,
				}, {
					head: "用药需求",
					open: false,
					list: [],
					tchGet: getHandoverList,
					pGet: getHandoverListP,
					type: 4,
				}, {
					head: "喂药记录",
					open: false,
					list: [],
					tchGet: getMedicationList,
					pGet: getMedicationListP,
					type: 5,
				},
				{
					head: "更多",
					open: false,
					list: [],
					tchGet: getAppMoreList,
					pGet: getAppMoreList,
					type: 6,
				}
				];
	const Templey1 = [{
					head: "饮食方面",
					open: false,
					list: [],
					tchGet: getFeedingList,
					pGet: getFeedingListP,
					type: 1,
				}];
	export default {
		mixins: [appMixin],
		components: {
			ChildrenBaseTopView,
			Temperature,
			Food,
			Defecation,
			Sleep,
			Handover,
			DateSelectView,
			Medication,
			Schedule,
			StudyBaby,
			RecordTypeSelect
		},
		data() {
			return {
				subList: [
					{
						title: '总缆',
						default: 'https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/zd/daily-sub1-default.png',
						hover: 'https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/zd/daily-sub1-hover.png'
					},
					{
						title: '健康',
						default: 'https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/zd/daily-sub2-default.png',
						hover: 'https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/zd/daily-sub2-hover.png'
					},
					{
						title: '饮食',
						default: 'https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/zd/daily-sub3-default.png',
						hover: 'https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/zd/daily-sub3-hover.png'
					},
					{
						title: '学习',
						default: 'https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/zd/daily-sub4-default.png',
						hover: 'https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/zd/daily-sub4-hover.png'
					}
				],
				subPostion: 0, 
				subShow: true,
				count: 5,
				value: 2,
				
				loaded: false,
				children: null,
				
				daily : '',
				itemList: [],
				itemShow: false,
				
				itemList1: [],
				itemShow1: false,
				
				headStyle: {
					'color': '#333333',
					'font-weight': 'bold',
					'font-size': '30rpx',
				},
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#DA473A'
						}
					}
				],
				
				dailyReport: {
					
				},
				
				scheduleRecordList: [
					
				]
			}
		},
		computed: {
			...mapState({
				parentInfo: state => state.user.parentInfo,
			}),
		},
		onLoad(options) {
			console.log(options);
			this.children = options;
			this.daily = this.formatTimestamp(Date.now(), 'yyyy/mm/dd');
			if (!this.$u.test.isEmpty(options.daily)) {
				this.daily = options.daily
			}
			
			if (this.appType === 'app-p' || this.appType === 'mp-p') {
				console.log(this.parentInfo);
				this.children = this.parentInfo.defaultBaby;
				this.getChildReport()
				this.getChildrenSchedule()

			}
			

			this.init();
		},
		methods: {
			itemClick(item, tabIndex) {
				const list = this.$store.state.user.parentInfo.defaultBaby
			  if (tabIndex === 0) {
				  // this.$u.route({
				  // 	url: 'pages_sub/record/temperature-page',
				  // 	params: {
				  // 	  recordId: item.id,
				  // 		 types: false,
				  // 		 ...list
				  // 	}
				  // })
				  this.$u.route({
				  	url: 'pages_evaluate/physicle/temperature-info-page',
				  	params: {
				  	  recordId: item.id,
				  		 types: false,
				  		 ...list
				  	}
				  })
			    // this.$refs.refRecordType.temperatureClick({ recordId: item.list[0].id })
			  } else if (tabIndex === 1) {
				this.$u.route({
					url: 'pages_evaluate/physicle/food-info-page',
					params: {
					  recordId: item.id,
						 types: false,
						 ...list
					}
				})
			      // this.$refs.refRecordType.foodClick({ recordId:item.list[0].id })
			  } else if (tabIndex === 2) {
				  this.$u.route({
				  	url: 'pages_evaluate/physicle/defecation-info-page',
				  	params: {
				  	  recordId: item.id,
				  		 types: false,
				  		 ...list
				  	}
				  })
			    // this.$refs.refRecordType.defecationClick(item.diaper, { recordId: item.list[0].id })
			  } else if (tabIndex === 3) {
				  this.$u.route({
				  	url: 'pages_evaluate/physicle/sleep-info-page',
				  	params: {
				  	  recordId: item.id,
				  	  types: false,
				  	   ...list
				  	}
				  })
			    // this.$refs.refRecordType.sleepClick({ recordId: item.list[0].id })
			  } else if (tabIndex === 6) {
				  this.$u.route({
				  	url: 'pages_evaluate/physicle/suckle-info-page',
				  	params: {
				  	  recordId: item.id,
					  types: false,
					  ...list
				  	}
				  })
			    // this.$refs.refRecordType.suckleClick({ recordId: item.list[0].id })
			  }
			},	
			subClick(index) {
				this.subPostion = index
			},
			
			dateChange(res) {
				console.log(res);
				this.daily = this.formatTimestamp(res.timestamp, 'yyyy/mm/dd');
				this.getChildReport()
				this.getChildrenSchedule()
				this.init();
			},
			
			async init() {
				this.loaded = false;
				this.itemShow = false;
				this.itemList = [ ...Templey ];
				this.itemList1 = [ ...Templey1 ];
				console.log(this.itemList)
				uni.showLoading({})
				try{
					for (let index = this.itemList.length - 1; index >= 0; index--) {
						let item = this.itemList[index];
						await this.getData(item, index, this.itemList, 0);
					}
					for (let index = this.itemList1.length - 1; index >= 0; index--) {
						let item = this.itemList1[index];
						await this.getData(item, index, this.itemList1, 1);
					}
				}finally {
					this.loaded = true;
					setTimeout(()=> {
						uni.hideLoading();
						this.subShow = false
					}, 500)
				}
				console.log('123456')
				console.log(this.itemList)
			},
			itemChange(res) {
				console.log(res);
				let show = res.show;
				let index = res.index;
				let item = this.itemList[index];
				if (!show) {
					return;
				}
			},
			
			async getData(item, index, itemList, type) {
				let getFunction = null;
				if (this.appType === 'app-tch' || this.appType === 'mp-tch') {
					getFunction = item.tchGet;
				} else if (this.appType === 'app-p' || this.appType === 'mp-p') {
					getFunction = item.pGet;
				}
				if (getFunction === null) {
					return;
				}
				await getFunction(this.children.id, this.daily).then(res => {
					item.list = res.data;
					if (item.list.length === 0) {
						itemList.splice(index, 1);
					} else {
						if (type === 0) {
							// 健康
											console.log('执行');
							this.itemShow = true;
						} else {
							// 饮食
							this.itemShow1 = true;
						}
					}
				})
			},
			
			getChildReport() {
				getDailyReport().then(res => {
					this.dailyReport = res.data
				})
			},
			
			getChildrenSchedule() {
				getChildrenSchedule({courseDateStr: this.daily}).then(res => {
					this.scheduleRecordList = res.data.nurseryScheduleRecordList
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	.container{
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-top: 20rpx;
		
		.sub{
			display: flex;
			flex-direction: row;
			
			margin-top: 20rpx;
			.sub-item{
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-items: center;
				background: #e1f0e9;
				border-radius: 16rpx;
				padding-top: 30rpx;
				padding-bottom: 20rpx;
				color: #333333;
				.cover{
					width: 48rpx;
					height: 48rpx;
				}
				.title{
					font-size: 28rpx;
					font-weight: 400;
					margin-top: 10rpx;
				}
			}
			.sub-item-check{
				background: #F5AC3C;
				color: #FFFFFF;
			}
		}
	
		.sub1{
			background: #fff3d7;
			border-radius: 16rpx;
			width: 100%;
			
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;
			padding: 30rpx;
			
			.content{
				display: flex;
				flex-direction: row;
				width: 100%;
				.left{
					background: #ff8c5d;
					flex: 1;
					margin-right: 10rpx;
					border-radius: 8rpx;
					display: flex;
					justify-self: center;
					align-items: center;
				}
				.right{
					flex: 1;
					display: flex;
					flex-direction: column;
					margin-left: 10rpx;
					.item1{
						height: 200rpx;
						background: #7cd8d9;
						border-radius: 8rpx;
						margin-bottom: 10rpx;
						display: flex;
						justify-self: center;
						align-items: center;
					}
					.item2{
						height: 200rpx;
						background: #fe5260;
						border-radius: 8rpx;
						margin-top: 10rpx;
						display: flex;
						justify-self: center;
						align-items: center;
					}
				}
				
				.content-item{
					display: flex;
					flex-direction: column;
					justify-self: center;
					align-items: center;
					width: 100%;
					.top{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						margin-bottom: 24rpx;
						.cover{
							width: 84rpx;
							height: 84rpx;
							margin-right: 50rpx;
						}
						
						.title{
							color: #FFFFFF;
							font-size: 36rpx;
							font-weight: 400;
						}
					}
				}
			}
			.title{
				margin-top: 30rpx;
			}
		}
	}
	.collapse{
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	.collapse-item{
		border-radius: 20px;
		
		.item{
		}
	}
	
	.line{
		width: 100%;
		height: 1px;
		background: #E8E8E8;
	}
</style>
